<template>
  <!-- 非公司git上的手写签名组件 -->
  <div>
    <el-card class="qianming-container" body-style="padding:0px">
      <!---vue-esign组件-->
      <vue-esign
        ref="esign"
        :isCrop="isCrop"
        :width="600"
        :height="300"
        :lineWidth="lineWidth"
        :lineColor="lineColor"
        :format="'image/png'"
        :bgColor.sync="bgColor"
      ></vue-esign>
      <div class="contro-container">
        <el-button type="danger" @click="handleReset">清空画板</el-button>
        <el-button type="primary" @click="handleGenerate">确认签名</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
// 引入组件
import vueEsign from "vue-esign";
// 这个是请求文件路径的接口
// import fileService from "@/api/file/fileService.js";
export default {
  components: { vueEsign },
  name: "sign",
  data() {
    return {
      lineWidth: 6,
      lineColor: "#000000",
      bgColor: "",
      resultImg: "",
      isCrop: false,
    };
  },
  methods: {
    // 清空画板..
    handleReset() {
      this.$refs.esign.reset();
      this.resultImg = "";
    },
    // 生成签名图片..
    handleGenerate() {
      this.$refs["esign"]
        .generate()
        .then((res) => {
          this.resultImg = res; // 得到了签字生成的base64图片
          // console.log('resultImg', this.resultImg)
          // 这里直接传base64到父组件，然后在父组件处理数据调用接口
          // this.$emit('setsignin', res)
          // 也可以转换成在线地址
          // const bl = this.dataURLtoFile(res);
          // let formData = new FormData();
          // formData.append("file", bl, Date.now() + ".png");

          console.log(
            "最终生成的base64图片刘静是------------------------file",
            this.resultImg
          );
          // 接口请求
          //   fileService.upload(formData).then((result) => {
          //     // 向父组件传已经转好的地址
          // 传递base64图片到父组件回显
          this.$emit("setsignin", this.resultImg);
          //   });
        })
        .catch((err) => {
          // 没有签名，点击生成图片时调用
          alert(err + " 未签名！");
        });
    },
    // 将base64转成blob流
    dataURLtoFile(urlData) {
      const type = "image/png";
      let bytes = null;
      if (urlData.split(",").length > 1) {
        bytes = window.atob(urlData.split(",")[1]);
      } else {
        bytes = window.atob(urlData);
      }
      let ab = new ArrayBuffer(bytes.length);
      let ia = new Uint8Array(ab);
      for (let i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
      }
      return new Blob([ab], { type });
    },
  },
};
</script>

<style scoped>
button {
  height: 40px;
}
.contro-container {
  width: 600px;
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background-color: #d3d3d3;
  position: absolute;
  bottom: 0px;
}
.qianming-container {
  width: 600px;
  height: 350px;
  margin: 10px auto;
  position: relative;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.box-card {
  width: 95%;
  margin-left: 2.5%;
  margin-top: 20px;
}
</style>
